<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <base th:href="@{/}">
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/ifream.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/banner.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/ifream/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/index/text-effect/linkstyles.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/my-layer-div.css}"/>
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/userInfo.css}">
</head>
<body>
<div id="header">
    <div class="header_content">
        <div class="header-banner">
            <div class="grid__item color-11">
                <a class="link link--yaku" th:href="@{/}">
                    <span>Y</span><span>u</span><span>a</span><span>n</span>
                </a>
            </div>
        </div>
        <div class="header-opt">
            <ul class="opt_ul">
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-huiyuan"></i>会员</a></li>
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-zhuti1"></i>主题</a></li>
                <li class="opt_li extend"><a th:href="@{/tool/toolNav}"><i class="iconfont icon-xiangzi"></i>工具</a></li>
                <li class="opt_li login" id="login_btn"><a th:href="@{/loginPage}"><i
                        class="iconfont icon-dengru"></i>登入</a></li>
                <li class="opt_li online_opt" id="online_btn">
                <span class="avatar">
                    <!--http://thirdqq.qlogo.cn/g?b=oidb&k=Pf4r0mHoCWm66OovCfEJnQ&s=100&t=1531640597-->
                    <img src="">
                </span>
                    <span class="user_info">
                    <span class="user_item logout"><a th:href="@{/sys/myZone}"><i class="iconfont icon-zhuye1"></i>我的主页</a></span>
                    <span class="user_item logout"><a th:href="@{/sys/userInfo}"><i class="iconfont icon-shezhi"></i>设置</a></span>
                    <span class="user_item logout"><a href="javascript:void(0);"><i class="iconfont icon-bangzhu"></i>帮助</a></span>
                    <span class="user_item logout"><a th:href="@{/signOut}"><i class="iconfont icon-tuichu1"></i>退出</a></span>
                </span>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="container">
    <input type="file" id="file" multiple="multiple" name="file" onchange="uploadResource()"
           accept="image/png, image/jpeg, image/jpg" style="display: none;">
    <div class="content bg">
        <span class="click_bg">换背景</span>
    </div>
    <div class="content info">
        <div class="social_info">
            <span class="info_item avatar">
                <span class="avatar_inner">
                    <img id="avatar" alt="我的头像"/>
                    <span class="click_btn">点击更换头像</span>
                </span>
            </span>
            <!--<span class="info_item logo">
                <span class="logo_item name">兰州</span>
                <span class="logo_item declarate">那一年东莞记录了我的爱情</span>
            </span>-->
        </div>
        <div class="user_info">
            <div class="info_content">
                <input type="hidden" name="userKey" id="userKey"/>
                <div class="content_item">
                    <span class="title">
                        <label for="nickName">昵称</label>
                    </span>
                    <span class="value">
                        <input autocomplete="off" name="nickName" id="nickName" placeholder="昵称" type="text"
                               value=""/>
                    </span>
                </div>
                <div class="content_item">
                    <span class="title">
                        <label>性别</label>
                    </span>
                    <span class="value gender">
                        <input name="gender" id="g1" type="radio" value="男">
                        <label for="g1">男</label>
                        <input name="gender" id="g2" type="radio" value="女">
                        <label for="g2">女</label>
                        <input name="gender" id="g3" type="radio" value="无" checked>
                        <label for="g3">保密</label>
                        <!--<input autocomplete="off" name="gender" id="gender" type="text" value="厕所狰狞表情"/>-->
                    </span>
                </div>
                <div class="content_item">
                    <span class="title">
                        <label for="email">电子邮箱</label>
                    </span>
                    <span class="value">
                        <input autocomplete="off" name="email" id="email" placeholder="邮箱地址" type="text"/>
                    </span>
                </div>
                <div class="content_item">
                    <span class="title">
                        <label for="mobile">手机</label>
                    </span>
                    <span class="value">
                        <input autocomplete="off" name="mobile" id="mobile" placeholder="手机号码" type="text"/>
                    </span>
                </div>
                <div class="content_item">
                    <span class="title">
                        <label for="age">年龄</label>
                    </span>
                    <span class="value">
                        <input autocomplete="off" name="age" id="age" type="text" placeholder="年龄"/>
                    </span>
                </div>
                <div class="content_item">
                    <span class="title">
                        <label for="declarate">个人宣言</label>
                    </span>
                    <span class="value">
                        <textarea autocomplete="off" name="declarate" id="declarate" placeholder="填写你的个人宣言"></textarea>
                    </span>
                </div>
            </div>
        </div>
        <div class="user_option">
            <div class="option_area">
                <span class="btn">保存</span>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="stand_by"><span class="support">本文由<a href="javascript:void(0);">兰州</a>提供技术支持</span>赣ICP备20000118号</div>
</div>
<!--<div id="nav">
    <span class="go_back" data-link="/">回到首页</span>
</div>-->
<script type="text/javascript" th:src="@{https://lib.baomitu.com/jquery/3.5.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/layopen.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script>
    let UPLOAD_TYPE = 'avatar';

    window.onload = function () {
        loadInfo();
    };

    /**
     * 返回首页
     */
    $('.go_back').on('click', function () {
        let link = $(this).data('link');
        if (link) {
            window.location.href = link;
        }
    });

    /**
     * 点击更换头像
     */
    $('.click_btn').on('click', function () {
        UPLOAD_TYPE = "avatar";
        $("#file").click();
    });

    /**
     * 点击更换头像
     */
    $('.click_bg').on('click', function () {
        UPLOAD_TYPE = "bg";
        $("#file").click();
    });

    /**
     * 保存用户数据
     */
    $('.user_option .option_area .btn').on('click', function () {
        let userKey = $("#userKey").val();
        let avatar = $('#avatar').attr('src');
        let nickName = $('#nickName').val();
        let gender = $("input[name='gender']:checked").val();
        let email = $('#email').val();
        let mobile = $('#mobile').val();
        let age = $('#age').val();
        let declarate = $('#declarate').val();
        let json = {
            userKey: userKey,
            avatar: avatar,
            nickName: nickName,
            gender: gender,
            email: email,
            mobile: mobile,
            age: age,
            declarate: declarate
        };
        console.log(json);
        ajaxPost('updateUserInfo', json, function () {
        }, function (result) {
            if (result.code === 200) {
                SuccessAlert('修改成功 !');
            } else {
                WarnAlert('请求数据失败, 请稍后重试');
            }
        }, function () {
            ErrorAlert('后台请求出错, 请稍后重试');
        });
    });


    function uploadResource() {
        let formData = new FormData(),
            fs = $("#file")[0].files;
        let max_size = 1024 * 1024 * 2;
        if (fs.length === 1) {
            let d = fs[0];
            if (d.size <= max_size) {  //文件必须小于100M
                if (/.(png|gif|jpg|jpeg|JPG|GIF|PNG|JPEG|jepg|JEPG)$/.test(d.name)) { //文件必须为文档
                    formData.append("file", fs[0]);  //文件上传处理
                } else {
                    WarnAlert('上传文件必须是图片格式！');
                    return false
                }
            } else {
                WarnAlert('上传文件过大(不得大于2MB)！');
                return false
            }
            let index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                url: 'upload/resource',
                type: "post",
                data: formData,
                //十分重要，不能省略
                cache: false,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (typeof (data) !== 'object') {
                        data = JSON.parse(data);
                    }
                    if (parseInt(data.code) === 200) {
                        layer.close(index);
                        changeImage(data.data);
                        $("#file").replaceWith('<input type="file" id="file" multiple="multiple" name="file" ' +
                            'onchange="uploadResource()" accept="image/png, image/jpeg, image/jpg" style="display: none;" />');
                    } else {
                        layer.close(index);
                        $("#file").replaceWith('<input type="file" id="file" multiple="multiple" name="file" ' +
                            'onchange="uploadResource()" accept="image/png, image/jpeg, image/jpg" style="display: none;" />');
                        WarnAlert(data.message);
                    }
                }
            });
        }
    }


    /**
     * 改变图片
     * @param data
     */
    function changeImage(data) {
        let imgUrl = data.remoteUrl + data.filePath;
        //let imgUrl = data.remoteUrl + '1595428224475.jpg';
        if (UPLOAD_TYPE === 'bg') {
            $('#container').css('background-image', 'url(' + imgUrl + ')');
        } else {
            $('#avatar').attr('src', imgUrl);
            $('.avatar img').eq(0).attr('src', imgUrl);
        }
    }


    // 标准方法定义
    function loadInfo() {
        let url = "getToken";
        $.ajax({
            type: "post",
            url: url,
            data: {},
            dataType: 'json',
            async: 'false',
            error: function (e) {
                // 啥也不做, 就当没有发生什么
                $('#login_btn').css('display', 'block');
                $('#online_btn').css('display', 'none');
                console.log('请求出错了哦');
            },
            success: function (result) {
                result = JSONUtil.parseObj(result);
                if (parseInt(result.code) === 200) {
                    let token = result.data;
                    $("#userKey").val(token.userKey);
                    $('#avatar').attr('src', token.avatar ? token.avatar : 'http://thirdqq.qlogo.cn/g?b=oidb&k=Pf4r0mHoCWm66OovCfEJnQ&s=100&t=1531640597');
                    $('#nickName').val(token.nickName);
                    $("input[name='gender'][value=" + token.gender + "]").attr("checked", true);
                    $('#email').val(token.email);
                    $('#mobile').val(token.mobile);
                    $('#age').val(token.age);
                    $('#declarate').text(token.declarate);
                    $('#login_btn').css('display', 'none');
                    $('#online_btn').css('display', 'block').find(".avatar img").attr('src', token.avatar);
                } else {
                    console.log("获取当前登入用户异常哦, 请检查你的参数捏!");
                }
            }
        });
    }
</script>
</body>
</html>